<template>
    <div class="user-info">
        <el-card shadow="never" class="!border-none">
            <el-descriptions title="个人信息" :column="1" size="large" border>
                <el-descriptions-item label-class-name="">
                    <template #label>
                        <div class="cell-item">头像</div>
                    </template>
                    <div class="flex items-center">
                        <avatarUpload
                            v-model="userInfo.avatar"
                            :width="50"
                            @upload_confirm="avatarEdit"
                        />
                    </div>
                </el-descriptions-item>
                <el-descriptions-item label-class-name="user-label">
                    <template #label>
                        <div class="cell-item">账号</div>
                    </template>
                    {{ userInfo.account }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="user-label">
                    <template #label>
                        <div class="cell-item">昵称</div>
                    </template>
                    {{ userInfo.nickname }}
                    <el-icon class="edit-icon" @click="nickeNameVisible = true"
                        ><el-icon-edit
                    /></el-icon>
                </el-descriptions-item>
                <el-descriptions-item label-class-name="user-label">
                    <template #label>
                        <div class="cell-item">性别</div>
                    </template>
                    {{ getSex }}
                    <el-icon class="edit-icon" @click="sexVisible = true"
                        ><el-icon-edit
                    /></el-icon>
                </el-descriptions-item>
                <el-descriptions-item label-class-name="user-label">
                    <template #label>
                        <div class="cell-item">手机号</div>
                    </template>
                    {{
                        isHideMobile && userInfo.mobile
                            ? mobileConceal(userInfo.mobile)
                            : userInfo.mobile
                    }}
                    <el-icon v-if="isHideMobile" class="edit-icon" @click="isHideMobile = false"
                        ><el-icon-hide
                    /></el-icon>
                    <el-icon v-else class="edit-icon" @click="isHideMobile = true"
                        ><el-icon-view
                    /></el-icon>
                </el-descriptions-item>
                <el-descriptions-item label-class-name="user-label">
                    <template #label>
                        <div class="cell-item">邮箱</div>
                    </template>
                    {{ userInfo.email }}
                    <el-icon class="edit-icon" @click="emailVisible = true"
                        ><el-icon-edit
                    /></el-icon>
                </el-descriptions-item>
                <el-descriptions-item label-class-name="user-label">
                    <template #label>
                        <div class="cell-item">注册时间</div>
                    </template>
                    {{ userInfo.create_time }}
                </el-descriptions-item>
            </el-descriptions>
            <div class="mt-[15px] flex justify-center">
                <el-button type="primary" size="large" @click="handleLogut"
                    >退出登录</el-button
                >
            </div>
        </el-card>
        <el-dialog v-model="nickeNameVisible" title="编辑昵称" width="500">
            <el-form :model="userInfo">
                <el-form-item label="昵称：" label-width="100px">
                    <el-input v-model="userInfo.nickname" autocomplete="off" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="nickeNameVisible = false"
                        >关闭</el-button
                    >
                    <el-button type="primary" @click="editNickename">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog v-model="emailVisible" title="编辑邮箱" width="500">
            <el-form :model="userInfo">
                <el-form-item label="邮箱：" label-width="100px">
                    <el-input v-model="userInfo.email" autocomplete="off" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="emailVisible = false"
                        >关闭</el-button
                    >
                    <el-button type="primary" @click="editEmail">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog v-model="sexVisible" title="编辑性别" width="500">
            <el-form :model="userInfo">
                <el-form-item label="性别：" label-width="100px">
                    <el-radio-group v-model="userInfo.sex">
                        <el-radio :label="0">未知</el-radio>
                        <el-radio :label="1">男</el-radio>
                        <el-radio :label="2">女</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="nickeNameVisible = false"
                        >关闭</el-button
                    >
                    <el-button type="primary" @click="editSex">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import {
    getUserInfo,
    updateNickname,
    updateSex,
    updateEmail,
} from "@/api/user";
import { mobileConceal } from "@/utils/validate";
import useUserStore from "@/stores/user";
import { messageSuccess } from "@/utils/message";

definePageMeta({
    auth: true,
    middleware: ["auth"],
});

const userStore = useUserStore();

const userInfo = reactive({
    avatar: "",
    account: "",
    nickname: "",
    sex: 0,
    mobile: "",
    email: "",
    create_time: "",
});

const getSex = computed(() => {
    let value = "";
    switch (userInfo.sex) {
        case 1:
            value = "男";
            break;
        case 2:
            value = "女";
            break;
        default:
            value = "未知";
            break;
    }
    return value;
});

const isHideMobile = ref(true);

const nickeNameVisible = ref(false);

const emailVisible = ref(false);

const sexVisible = ref(false);

const getData = async (is_reset = false) => {
    const data = await getUserInfo();
    for (const key in userInfo) {
        if (data[key] != null && data[key] != undefined) {
            userInfo[key] = data[key];
        }
    }
    //重置用户信息
    if (is_reset) userStore.getUser();
};

const avatarEdit = (res) => {
    getData(true);
};

const editNickename = async () => {
    await updateNickname({ nickname: userInfo.nickname });
    messageSuccess("修改成功");
    nickeNameVisible.value = false;
    getData(true);
};

const editEmail = async () => {
    await updateEmail({ email: userInfo.email });
    messageSuccess("修改成功");
    emailVisible.value = false;
    getData(true);
};

const editSex = async () => {
    await updateSex({ sex: userInfo.sex });
    messageSuccess("修改成功");
    sexVisible.value = false;
    getData(true);
};

const handleLogut = () => {
    messageBox("确认要退出吗？").then(async () => {
        await userStore.logout();
        navigateTo("/login");
    });
};

getData();
</script>
<style lang="scss">
.user-info {
    .user-label {
        width: 200px;
    }

    .edit-icon {
        vertical-align: middle;
        cursor: pointer;
        color: var(--el-color-primary);
    }
}
</style>
